<template>
  <div class="page-content">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-2">
      <div>
        <h1 class="text-2xl font-bold text-neutral-900">组件库</h1>
        <p class="text-neutral-500 mt-1">常用组件规范与示例</p>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
      <div v-for="comp in components" :key="comp.title"
        class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
        <div class="p-2.5">
          <div class="flex justify-between items-start mb-1.5">
            <h3 class="font-semibold text-neutral-900">{{ comp.title }}</h3>
            <el-button size="small" Plain>查看</el-button>
          </div>
          <p class="text-sm text-neutral-600 mb-2 line-clamp-1">{{ comp.description }}</p>
          <div class="flex flex-wrap gap-1 mb-2">
            <span v-for="tag in comp.tags" :key="tag"
              class="px-1 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#{{ tag }}</span>
          </div>
          <div class="flex justify-between items-center text-xs text-neutral-500 pt-1 border-t border-neutral-100">
            <span>更新于 {{ comp.updateTime }}</span>
            <span>示例数 {{ comp.examples }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const components = ref([
  {
    title: '按钮 Button',
    description: '统一按钮规格，支持主次、形态与图标组合。',
    tags: ['交互', '基础'],
    updateTime: '昨天',
    examples: 6,
  },
  {
    title: '输入框 Input',
    description: '文本输入组件，支持前缀/后缀、校验与清空。',
    tags: ['表单', '基础'],
    updateTime: '3 天前',
    examples: 5,
  },
  {
    title: '选择器 Select',
    description: '下拉选择器，支持搜索、分组与多选。',
    tags: ['表单', '基础'],
    updateTime: '1 周前',
    examples: 8,
  },
  {
    title: '模态框 Dialog',
    description: '通用模态弹窗，支持异步确认与自定义页脚。',
    tags: ['反馈', '基础'],
    updateTime: '2 周前',
    examples: 4,
  },
])
</script>

<style lang="scss" scoped></style>
